<template>
    <div class="home-father">
        <LockScreen></LockScreen>
        <div class="home-my-container-1">
            <div class="home-my-header">
                <div style="display: flex; justify-content: space-between;">
                    <div style="display: flex; align-items: center;">
                        <svg 
                            xmlns="http://www.w3.org/2000/svg" 
                            xmlns:xlink="http://www.w3.org/1999/xlink" 
                            aria-hidden="true" 
                            role="img" 
                            class="iconify iconify--logos" 
                            width="37.07" height="36" 
                            preserveAspectRatio="xMidYMid meet" 
                            viewBox="0 0 256 198"
                            style="margin: 1vw 0;"
                        >
                            <path 
                                fill="#41B883" 
                                d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"
                            >
                            </path>
                            <path 
                                fill="#41B883" 
                                d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"
                            >
                            </path>
                            <path 
                                fill="#35495E" 
                                d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"
                            >
                            </path>
                        </svg>
                        <div style="font-size: 1.2vw; padding-left: 1vw; color: rgb(133, 134, 134);">Vue Admin Plus</div>
                    </div>
                    <div style="display: flex; align-items: center;">
                        <el-icon 
                            size="16"
                            class="home-my-icon"
                            @click="isLocked = true"
                        >
                            <Lock />
                        </el-icon>
                        <el-icon 
                            size="16"
                            class="home-my-icon"
                            @click="homeSearchDialogVisible = true"
                        >
                            <Search />
                        </el-icon>
                        <HomeTipsDropDrown />
                        <el-icon 
                            size="16"
                            class="home-my-icon"
                            @click="toggleFullScreen"
                        >
                            <FullScreen />
                        </el-icon>
                        <el-icon 
                            size="16"
                            class="home-my-icon"
                            @click="reload"
                        >
                            <Refresh />
                        </el-icon>
                        <HomeAvatarMsg />
                    </div>
                </div>
            </div>
            <div class="home-my-container-2">
                <HomeMenu :isCollapse="isCollapse" :menuItems="menuItems" v-model:defaultActive="defaultActive" v-model:currentTab="currentTab" v-model:tabsArr="tabsArr" />
                <div class="home-my-main">
                    <HomeTabs v-model:isCollapse="isCollapse" v-model:defaultActive="defaultActive" v-model:currentTab="currentTab" v-model:tabsArr="tabsArr" />
                    <div class="home-my-main-content">
                        <router-view></router-view>
                    </div>
                </div>
            </div>
        </div>
        
        <HomeSearchDialog v-model="homeSearchDialogVisible" />
    </div>
</template>

<script lang="ts" setup>
    import { ref, reactive, markRaw, onBeforeMount, onMounted, onBeforeUnmount, nextTick, computed, shallowRef  } from 'vue'
    import type { Ref, Raw } from 'vue'
    import { HAGBTXXApi } from '@/apis'
    import { useRoute, useRouter } from 'vue-router'
    import { storeToRefs } from 'pinia'
    import { useStore } from '@/store'
    import {
        Document,
        Menu as IconMenu,
        Setting,
        House,
        Notification,
        Connection,
        Odometer,
        Lock,
        Search,
        Bell,
        FullScreen,
        Refresh,
        CircleClose,
        Warning,
        Fold,
        Expand,
        Film,
    } from '@element-plus/icons-vue'
    import LockScreen from '@/components/lockScreen/LockScreen.vue'
    import HomeTipsDropDrown from './components/hometipsDropDrown/HomeTipsDropDrown.vue'
    import HomeAvatarMsg from './components/homeAvatarMsg/HomeAvatarMsg.vue'
    import HomeMenu from './components/homeMenu/HomeMenu.vue'
    import HomeSearchDialog from './components/homeSearchDialog/HomeSearchDialog.vue'
    import HomeTabs from './components/homeTabs/HomeTabs.vue'
    const route = useRoute()
    const router = useRouter()
    const store = useStore()

    const isCollapse: Ref<boolean> = ref(false) //折叠面板
    const { isLocked } = storeToRefs(store)
	const avatarImage = new URL('@/assets/img/avatar/avatar.png', import.meta.url).href
    // const avatarImage: Raw<any[]> = markRaw([new URL('@/assets/img/avatar/avatar.png', import.meta.url).href])
    const homeSearchDialogVisible: Ref<boolean> = ref(false)
    const menuItems: Ref<any[]> = shallowRef([
        {
            iconName: House,
            title: '首页',
            routerPath: '/',
            name: '/',
            menuType: 'subMenu', //subMenu, menuItemGroup, menuItem
            idDot: false,
            offset: [],
            children: [
                {
                    iconName: House,
                    title: '首页',
                    routerPath: '/index',
                    name: '/index',
                    menuType: 'menuItem', //subMenu, menuItemGroup, menuItem
                    idDot: false,
                    offset: [],
                    children: [],
                },
                {
                    iconName: Notification,
                    title: '看板',
                    routerPath: '/index2',
                    name: '/index2',
                    menuType: 'menuItem', //subMenu, menuItemGroup, menuItem
                    idDot: false,
                    offset: [],
                    children: [],
                },
                {
                    iconName: Connection,
                    title: '工作台',
                    routerPath: '/index3',
                    name: '/index3',
                    menuType: 'menuItem', //subMenu, menuItemGroup, menuItem
                    idDot: true,
                    offset: [10, 25],
                    children: [],
                },
                {
                    iconName: Film,
                    title: '表格',
                    routerPath: '/comprehensiveTabel',
                    name: '/comprehensiveTabel',
                    menuType: 'menuItem', //subMenu, menuItemGroup, menuItem
                    idDot: true,
                    offset: [10, 25],
                    children: [],
                },
            ],
        },
        {
            iconName: IconMenu,
            title: '组件',
            routerPath: '/index5',
            name: '/index5',
            menuType: 'menuItem', //subMenu, menuItemGroup, menuItem
            idDot: true,
            offset: [10, 25],
            children: [],
        },
        {
            iconName: Document,
            title: '其他',
            routerPath: '/index6',
            name: '/index6',
            menuType: 'menuItem', //subMenu, menuItemGroup, menuItem
            idDot: false,
            offset: [],
            children: [],
        },
        {
            iconName: Setting,
            title: '配置',
            routerPath: '/index7',
            name: '/index7',
            menuType: 'menuItem', //subMenu, menuItemGroup, menuItem
            idDot: false,
            offset: [],
            children: [],
        },
        // {
        //     iconName: Warning,
        //     title: '404',
        //     routerPath: '/404',
        //     name: '/404',
        //     menuType: 'menuItem', //subMenu, menuItemGroup, menuItem
        //     idDot: false,
        //     offset: [],
        //     children: [],
        // },
    ])
    const defaultActive: Ref<string> = ref('')
    const getDefaultActive = (dataArr) => {
        if (dataArr[0].children?.length > 0) {
            getDefaultActive(dataArr[0].children)
        } else {
            defaultActive.value = dataArr[0].routerPath
        }
    }
    getDefaultActive(menuItems.value)

    const currentTab: Ref<string> = ref('')
    const tabsArr: Ref<any[]> = ref([
        // {
        //     iconName: House,
        //     title: '首页',
        //     routerPath: '/index',
        //     name: '/index',
        //     menuType: 'menuItem', //subMenu, menuItemGroup, menuItem
        //     idDot: false,
        //     offset: [],
        //     children: [],
        // }
    ])
    
    const toggleFullScreen = () => {
        if (!document.fullscreenElement) {
            enterFullScreen();
        } else {
            exitFullScreen();
        }
    }
    const enterFullScreen = () => {
        let element: any = document.documentElement;
        if (element.requestFullscreen) {
            element.requestFullscreen();
        } else if (element.mozRequestFullScreen) { /* Firefox */
            element.mozRequestFullScreen();
        } else if (element.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
            element.webkitRequestFullscreen();
        } else if (element.msRequestFullscreen) { /* IE/Edge */
            element.msRequestFullscreen();
        }
    }
    const exitFullScreen = () => {
        if (document.exitFullscreen) {
            document.exitFullscreen();
        } else if (document.mozCancelFullScreen) { /* Firefox */
            document.mozCancelFullScreen();
        } else if (document.webkitExitFullscreen) { /* Chrome, Safari and Opera */
            document.webkitExitFullscreen();
        } else if (document.msExitFullscreen) { /* IE/Edge */
            document.msExitFullscreen();
        }
    }
    const reload = () => {
        location.reload()
    }
</script>

<style lang="scss" scoped>
    // .home::after {
    //     content: '';
    //     position: absolute;
    //     left: 0;
    //     top: 0;
    //     z-index: -1;
    //     width: 100vw;
    //     height: 100vh;
    //     background-image: url('@/assets/avatar/bg8.png');
    //     background-size: 100% 100%;
    //     filter: blur(5px);
    // }
    .home-father {
        width: 100vw;
        height: 100vh;
        overflow: hidden;
    }
    .home-my-container-1 {
        height: 100%;
        display: flex;
        flex-direction: column;
    }
    .home-my-container-2 {
        // height: 100%;
        flex: 1;
        display: flex;
        overflow: hidden;
    }
    .home-my-header {
        border-bottom: 1px solid #f9f8f8;
    }
    .home-my-icon {
        @include my-home-head-icon;
    }
    .home-my-main {
        width: 100%;
        height: 100%;
        padding: 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        .home-my-main-content {
            // width: 100%;
            // height: 100%;
            flex: 1;
            box-sizing: border-box;
            padding: 20px;
            overflow-y: scroll;
            overflow-x: hidden;
            background: rgb(246, 248, 249);
        }
    }
    // ::-webkit-scrollbar {
    //     /*滚动条整体样式*/
    //     width: 8px;  /*高宽分别对应横竖滚动条的尺寸*/
    //     height: 8px;
    //     background: #f1f1f1;
    // }
    // ::-webkit-scrollbar-thumb {
    //     /*滚动条里面小方块*/
    //     border-radius: 10px;
    //     box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    //     background: rgb(179, 178, 178)
    // }
    // ::-webkit-scrollbar-track {
    //     /*滚动条里面轨道*/
    //     box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    //     background: #f1f1f1;
    // }
    // ::-webkit-scrollbar-button{
    //     /* 滚动条两端的按钮 */
    //     // background: #f1f1f1;
    //     width: 0;
    //     height: 0;
    // }
    // /* 当滑块悬停或活动时，可以添加更多样式 */
    // ::-webkit-scrollbar-thumb:hover {
    //     background: rgb(148, 148, 148); /* 设置滑块在悬停状态下的背景颜色 */
    // }
</style>